<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #menu>a {
            display: inline-block;
            width: 100px;
            text-align: center;
            padding: 10px;
            text-decoration: none;
        }
        
        #menu>a.active {
            border-bottom: 2px solid pink;
            color: pink;
        }
        
        #content>div {
            display: none;
        }
        
        #content>div:first-child {
            display: block;
        }
    </style>
    <!-- 使用jq之前需要先引入该文件，才能使用里面的方法 -->
    <script src="jquery-3.6.0.min.js"></script>
</head>

<body>
    <input type="button" value="隐藏">
    <div>内容</div>
    <script>
        $(function() {
            // $("input[type='button'][value='隐藏']").on("click", function() {
            //         // toggle()显示隐藏来回切换
            //         $(this).next().toggle();
            //         // next()   同级下一个元素     
            //         // $(this).next().hide();
            //         // is(":visible")判断是否显示
            //         // if ($(this).next().is(":visible")) {
            //         //     $(this).next().hide();
            //         // } else {
            //         //     $(this).next().show();
            //         // }
            //     })
            $("input[type='button']").on("click", function() {
                // toggle()显示隐藏来回切换
                // $(this).next().toggle();
                // next()   同级下一个元素     
                // $(this).next().hide();
                // is(":visible")判断是否显示
                if ($(this).next().is(":visible")) {
                    $(this).val("显示").next().hide();
                } else {
                    $(this).val("隐藏").next().show();
                }
            })

        })
    </script>
    <div id="menu">
        <a class="active">栏目1</a>
        <a>栏目2</a>
        <a>栏目3</a>
    </div>
    <div id="content">
        <div>内容1</div>
        <div>内容2</div>
        <div>内容3</div>
    </div>
    <script>
        $(function() {
            // onclick    注意   a连接路径为href="#"  或不写href
            $("#menu>a").on("click", function() {

                // $("#menu>a").removeClass("active");
                // addClass 添加类名
                // $(this).addClass("active");
                // removeClass 添加类名
                // $(this).remove("active");
                // siblings()同级其他元素
                $(this).addClass("active").siblings().removeClass("active");
                //得到当前元素在所有元素中的位置
                let index = $(this).index();
                //eq()选择指定位置的元素  show()显示   hide()隐藏
                $("#content>div").eq(index).show().siblings().hide();
            })
        })
    </script>
</body>

</html>